<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml">

	<ui:define name="content">
		<h:outputScript name="echars/echarts.js" target="head" />
		<h:outputScript name="echars/china.js" target="head" />
		<ui:define name="head">
			<style type="text/css">
.fa {
	font-size: 14px;
	font-family: FontAwesome;
	font-weight: lighter;
	font-style: normal;
}

.ui-tree .ui-treenode-icon {
	display: inline-block;
	vertical-align: bottom;
}
</style>
		</ui:define>

		<h:form id="form1">
			<p:growl id="msg" showDetail="true"></p:growl>
			<p:layout id="layout" style="min-height:770px;">
				<p:layoutUnit position="west" header="线路列表" size="330"
					resizable="true">
					<f:facet name="header">
						<p:panelGrid columns="2">
							<h:outputLabel for="multiple" value="电压等级: " />
							<p:selectCheckboxMenu id="multiple"
								value="#{mapViewController.selectedVoltage}" label="电压等级"
								multiple="true" filter="true" filterMatchMode="startsWith"
								panelStyle="width:250px">
								<p:ajax update=":form1:tree"
									listener="#{mapViewController.initTree}" />
								<f:selectItems value="#{mapViewController.voltages}" />
							</p:selectCheckboxMenu>
							<h:outputLabel for="selectedName" value="当前选择的线路: " />
							<p:column>
								<p:inputText id="selectedName"
									value="#{mapViewController.selectedLine}"></p:inputText>
								<p:commandButton icon="ui-icon-trash"
									actionListener="#{mapViewController.clearSelectedLine}"
									update=":form1:tree selectedName" oncomplete="reloadData()"></p:commandButton>
							</p:column>
						</p:panelGrid>
					</f:facet>
					<p:tree value="#{mapViewController.treeNodeResource}"
						style="width:300px;border:none" selectionMode="signle" var="node"
						dynamic="true" id="tree" widgetVar="tree" animate="true">
						<p:ajax event="expand" update="tree"
							listener="#{mapViewController.onNodeExpand}" />
						<p:ajax event="select" process=":form1"
							update=":form1:msg :form1:selectedName"
							listener="#{mapViewController.onNodeSelect}"
							oncomplete="initialData()" />
						<p:treeNode type="1" icon="fa fa-folder-open-o">
							<h:outputText value="#{node}" />
						</p:treeNode>
						<p:treeNode type="ACLineSegment" icon="fa fa-exchange">
							<h:outputText value="#{node}" />
						</p:treeNode>
						<p:treeNode type="LineTower" icon="fa fa-long-arrow-up">
							<h:outputText value="#{node}" />
						</p:treeNode>
					</p:tree>

				</p:layoutUnit>
				<p:layoutUnit position="center">
					<div id="main" style="height: 800px; width: 100%;"></div>
				</p:layoutUnit>
			</p:layout>
		</h:form>



		<script>
	var myChart = echarts.init(document.getElementById('main'));
	var getLineTower = function(tdata){
		var pointdata = [];
		for (var i = 0; i &lt; tdata.length; i++){
		 pointdata.push({
	         coords: tdata[i]
			});
		}
		return pointdata;
	}
	    
	var color = ['#a6c84c', '#ffa022', '#46bee9'];
	
	var series = [];
	var getMapOption =  function(lineData){
		if(lineData){
			for (var i = 0; i &lt; lineData.length; i++) { 
				var dataItem = lineData[i]; 
				 series.push(
						    {
						        name: dataItem[0],
						        type: 'lines',
						        zlevel: 2,
						        lineStyle: {
						            normal: {
						                color: color[0],
						                width: 2,
						            }
						        },
						        data: getLineTower(dataItem[1])
						    });
			 } 
		}
	   
		var option = {
		    backgroundColor: '#404a59',
		    geo: {
		        map: 'china',
		        center: [115.01493, 24.63109],
	            zoom: 3,
		        label: {
		            emphasis: {
		                show: false
		            }
		        },
		        roam: true,
		        itemStyle: {
		            normal: {
		                areaColor: '#323c48',
		                borderColor: '#404a59'
		            },
		            emphasis: {
		                areaColor: '#2a333d'
		            }
		        }
		    },
		    series: series
		};
		return option;
	};
	var reloadData = function(){
		var myChart = echarts.init(document.getElementById('main'));
		series = [];
		myChart.setOption(getMapOption(null));
	};
	var initialData = function() {
		var lname = document.getElementById('form1:selectedName').value;
		if(lname){
			$.ajax({
			type:"GET",
			url:"/rest/getLineTowerByName/"+lname+"?t="+new Date().getTime(),
			dataType: 'json',
			success: function(data){
				console.log(data);
			     myChart.setOption(getMapOption(data));
			},
			error : function() {  
			     alert("异常！");  
			     myChart.setOption(getMapOption(null));
			 }  
			});
		} else {
			 myChart.setOption(getMapOption(null));
		}
	};
	initialData();
	
	</script>
	</ui:define>

</ui:composition>
